<template>
  <a-modal :visible="visible" @cancel="cancle" width="80%" :footer="null">
    <a-card>
      <template #title>
        <div style="font-weight: bolder; font-size: 20px">
          <!-- 1 待审核 2已通过 3拒绝 -->
          <span v-if="user.status == 1">待审核</span>
          <span v-if="user.status == 2">已通过</span>
          <span v-if="user.status == 3">已拒绝</span>
        </div>
      </template>
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item>
          <a-descriptions
            title="基本信息"
            :label-style="itemLabel"
            layout="vertical"
            bordered
            :column="7"
            class="buisness"
          >
            <a-descriptions-item label="姓名" :label-style="itemLabel">{{
              user.realName
            }}</a-descriptions-item>
            <a-descriptions-item label="ID">{{
              user.nurseId
            }}</a-descriptions-item>
            <a-descriptions-item label="性别">{{
              user.sex
            }}</a-descriptions-item>
            <a-descriptions-item label="身份证号">{{
              user.idCard
            }}</a-descriptions-item>
            <a-descriptions-item label="用户来源">{{
              user.registSource
            }}</a-descriptions-item>
            <a-descriptions-item label="申请时间">{{
              user.updatedAt
            }}</a-descriptions-item>
            <a-descriptions-item label="职称">{{ nurseType[user.identity] }}</a-descriptions-item>
          </a-descriptions>
        </a-form-item>
        <a-form-item label="护工执业证" v-if="user.identity == 2">
          <div class="df">
            <a-image
              :width="100"
              v-if="user.caregiverPicture"
              :src="user.caregiverPicture"
            />
            <div style="width: 20px"></div>
            <div style="width: 20px"></div>
            <!-- <a-image :width="100" :src="user.orderPicture" /> -->
          </div>
        </a-form-item>
        <a-form-item label="康复师职业资格证" v-if="user.identity == 4">
          <div class="df">
            <a-image
              :width="100"
              v-if="user.caregiverPicture"
              :src="user.caregiverPicture"
            />
            <div style="width: 20px"></div>
            <div style="width: 20px"></div>
            <!-- <a-image :width="100" :src="user.orderPicture" /> -->
          </div>
        </a-form-item>
        <template v-else>
          <a-form-item label="身份证正面" >
            <div class="df">
              <a-image
                :width="100"
                v-if="user.supportWorkerIdcardJson"
                :src="idcardBefore"
              />
            </div>
          </a-form-item>
          <a-form-item label="身份证反面">
            <div class="df">
              <a-image :width="100" v-if="user.supportWorkerIdcardJson" :src="idcardBack" />
            </div>
          </a-form-item>
        </template>
       
        <a-form-item label="拒绝原因" v-if="user.status == 3">
          {{ user.reason }}
        </a-form-item>
        <!-- 审核信息 -->
        <a-form-item label="审核信息">
          <div>审核人员：{{ user.checkPerson }}</div>
          <div>审核时间：{{ user.checkTime }}</div>
        </a-form-item>
      </a-form>
      <!-- 底部内容 -->
      <a-row>
        <a-divider></a-divider>
        <template v-if="isEdit == 1">
          <a-col :span="4" :offset="6">
            <a-button type="danger" @click="reject" class="d-a-center"
              >拒绝</a-button
            >
          </a-col>
          <a-col :span="4" :offset="1">
            <a-button type="primary" @click="pass" class="d-a-center"
              >通过</a-button
            >
          </a-col>
        </template>
        <a-col :span="4" :offset="isEdit == 1 ? 1 : 12" v-if="isEdit == 0">
          <a-button type="info" @click="cancle" class="d-a-center"
            >关闭</a-button
          >
        </a-col>
      </a-row>
    </a-card>

    <!-- 拒绝审核-->
    <a-modal
      :destroyOnClose="true"
      v-model:visible="rejectVisible"
      title="原因填写"
      @ok="handleOk"
      ok-text="提交"
      :closable="true"
    >
      <a-form ref="reasonRef" :model="reasonForm" :rules="rules">
        <a-form-item label="主述" name="remake">
          <a-textarea v-model:value="reasonForm.remake"></a-textarea>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-modal>
</template>
<script>
import { onMounted, ref, reactive, createVNode, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
// import { Modal, notification } from "ant-design-vue";
import {  notification } from "ant-design-vue";
import { useModal } from "@/hooks"
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import {
  selectNurseInfoCheckById,
  updateNurseInfoStatus,
} from "@/api/buisness/index";
import {
		nurseType
	} from "@/utils/dict.js";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: "",
    },
    isEdit: {
      type: Boolean,
      default: 0,
    },
  },

  setup(props, { emit }) {
    const data = reactive({
      nurseType,
      idcardBack: "",
      idcardBefore: "",
    });
    const router = useRouter();
    const route = useRoute();
    const isEdit = ref("");

    const reasonRef = ref("");
    const reasonForm = reactive({
      remake: "",
    });

    const user = ref("");
    const rejectVisible = ref(false);

    const rules = {
      remake: [
        {
          required: true,
          message: "请填写原因!",
          trigger: "blur",
        },
      ],
    };

    const handleOk = (e) => {
      reasonRef.value
        .validate()
        .then(async () => {
          let statusMap = {
            1: 3,
            2: 2
          }
          let obj = {
            id: props.id,
            remake: reasonForm.remake,
            status: statusMap[user.value.status],
            subStatus: 3,
            identity: user.value.identity,
          };
          console.log(obj);
          let res = await updateNurseInfoStatus(obj);
          if (res.success) {
            console.log(res);
            notification.success({
              message: "执行成功 ",
              duration: 1,
            });

            rejectVisible.value = false;
            cancle(true);
          }
        })
        .catch((error) => {});
    };
    const reject = () => {
      rejectVisible.value = true;
    };
    const cancle = (e) => {
      emit("closeModal", e);
    };
    const pass = () => {
      console.log(user.value.identity)
      const {closeModal} = useModal.confirm({
        title: "确认通过此资格认证吗？",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确定",
        cancelText: "取消",
        onOk: async () => {
          let obj = {
            id: props.id,
            remake: reasonForm.remake,
            status: 2,
            subStatus: 2,
            identity: user.value.identity,
          };
          let res = await updateNurseInfoStatus(obj);
          if (res.success) {
            notification.success({
              message: "执行成功 ",
              duration: 1,
            });
            closeModal()
            cancle(true);
          }
        },
      });
    };
    init();
    async function init() {
      let res = await selectNurseInfoCheckById(props.id);
      if (res.success) {
        console.log(res);
        user.value = res.object;
        const supportWorkerIdcardJson = res.object.supportWorkerIdcardJson.split(",");
        data.idcardBefore = supportWorkerIdcardJson[0];
        data.idcardBack = supportWorkerIdcardJson[1];
        console.log(supportWorkerIdcardJson)
        console.log(data);
      }
    }

    onMounted(() => {});
    return {
      ...toRefs(data),
      user,
      reasonRef,
      reasonForm,
      rejectVisible,
      rules,
      handleOk,
      reject,
      pass,
      labelCol: {
        style: {
          width: "100px",
          fontWeight: "bolder",
        },
      },
      wrapperCol: {
        span: 20,
        offset: 1,
      },
      itemLabel: {
        color: "#2a9d8f",
        fontWeight: "bolder",
      },
      cancle,
    };
  },
};
</script>
<style scoped></style>
